<template><div><h2 id="理论" tabindex="-1"><a class="header-anchor" href="#理论"><span>理论</span></a></h2>
<ol>
<li>什么是CSS？这个东西用来干什么的？他的语法是什么</li>
<li>写出使用CSS的三种方式的demo</li>
<li>写出CSS的几种选择器的demo</li>
</ol>
<ul>
<li>标签选择器</li>
<li>id选择器</li>
<li>class选择器</li>
<li>属性选择器</li>
<li>后代选择器</li>
<li>子选择器</li>
<li>相邻兄弟选择器</li>
<li>伪类和伪元素选择器</li>
</ul>
<ol start="4">
<li>常用的CSS属性有哪些？自己总结一下</li>
</ol>
<ul>
<li>单位（px,em,rem,vw,vh他们都是啥意思）</li>
<li>背景</li>
<li>文本</li>
<li>字体</li>
</ul>
<ol start="5">
<li>常用的布局有哪些？写下demo</li>
</ol>
<ul>
<li>流式布局</li>
<li>flex布局</li>
<li>grid布局</li>
<li>浮动布局（了解即可）</li>
</ul>
<ol start="6">
<li>定位有哪些？写下demo</li>
</ol>
<ul>
<li>relative</li>
<li>absolute</li>
<li>fixed</li>
<li>sticky</li>
</ul>
<ol start="7">
<li>媒体查询是什么？怎么用的？</li>
<li>什么叫做响应式布局？</li>
<li>html元素的z-index值是干什么用的？</li>
<li>html元素的display属性可以取那些值？</li>
<li>CSS的盒子模型是什么？</li>
</ol>
<h2 id="实验" tabindex="-1"><a class="header-anchor" href="#实验"><span>实验</span></a></h2>
<ol>
<li>在不使用flex布局的情况下，如何让三个高度不一的div标签，沿水平中轴线对齐？
<img src="@source/notes/开发路线/1.前端/2-1.png" alt=""></li>
<li>在不使用flex布局的情况下，如何让三个长度不一的span标签垂直居中
<img src="@source/notes/开发路线/1.前端/2-2.png" alt=""></li>
<li>完成如图所示的B站首页，尽可能的一样(轮播图可以放张图片上去，不用实现)，有精力的还可以做一下当浏览器发生缩放的时候，页面如何不会乱？
<img src="@source/notes/开发路线/1.前端/2-3.png" alt=""></li>
</ol>
</div></template>


